<%@ page language="java" import="java.util.*,com.chj.entity.*, com.chj.constants.Constants" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">

    <title>选择车位界面</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

    <!-- css/evtcar.css -->
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="css/easyui/themes/default/easyui.css" />
	<link type="text/css" rel="stylesheet" href="css/evtcar.css" />
	<link type="text/css" rel="stylesheet" href="css/person/userInf.css" />
    <link type="text/css" rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
    <link type="text/css" rel="stylesheet" href="css/demo.css"   />
    <link type="text/css" rel="stylesheet" href="css/easyui/themes/icon.css">

    <!-- 导入JS -->
    <script type="text/javascript" src="js/login.js"></script>
    <script type="text/javascript" src="js/jquery/1.6/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="js/easyui/1.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/easyui/1.4/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/staticinfo.js"></script>


  </head>

  <body>
    <!--顶部导航栏开始 -->
    <%@include file="head.jsp"%>
    <!--下面是中部导航栏的代码-->
    <div class="nav-green nav-head" id="J_m_nav">
        <div class="nav-content">
            <div class="nav-btn"><a href="index.do">首页</a></div>
            <div class="nav-btn active"><a href="ecarcharge/we_need_charge.do">我要充电</a></div>
            <div class="nav-btn"><a href="person/person_center.do">个人中心</a></div>
            <div class="nav-btn"><a href="about_me.do">关于我们</a></div>
            <div class="nav-btn"><a href="person/person_help.do">用户帮助</a></div>
        </div>
    </div>
    </header>
<div class="main">
    <div class="newcontainer">
        <div id="user-card">
            <div class="inners clearfix without-side">
                <div class="content function" style="width: 1024px; margin: 0px auto; font-size: 23px;">
                    <p>网点名称：${netWork.networkName}</p>
                    <p>网点地址：${netWork.networkProvince}${netWork.networkCity}${netWork.networkArea}${netWork.networkAddress}</p>
                    <p>网点车位数量：${netWork.networkParkSize}(个)</p>
                    <p>营业起止时间：${netWork.networkTimeBegin} - ${netWork.networkTimeEnd} </p>
                    <br/>
                    <p>充电时间段:
                     <input id="chargeTimeBegin" type="text" class="easyui-datetimebox" style="width: 150px;"/>
                     - 
                     <input id="chargeTimeEnd" type="text" class="easyui-datetimebox"  style="width: 150px;"/>  
                     <button id="queryButton" type="button" class="btn btn-primary">查询车位</button>
                </div>
             </div>
        </div>
        <div id="myecar" style="width: 1170px;margin: 0 auto;">
            <div class="title">车位信息
            <div id="ParkingAllowance" style="display: none;">
                     <p>剩余<span id="parkSize"></span>个车位</p>
                     </div>
                </div>
                <div class="inf">
                    <div class="containbox">
                        <div class="bar">
                            <div role="tabpanel">
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="neworder">
                                        <table class="table table-striped" id="newOrderContent">
                                       	<tr>
                                            <th style="display:none;">电动车位Id</th>
                                            <th>电动车位名称</th>
                                            <th>电动车位大小</th>
                                            <th>电动车位单价</th>
                                            <th>电动车位状态</th>
                                            <th>操作</th>
                                        </tr>
	                                    <tr align="center" style="font-size: 25px;">
                                            <td colspan="6">请输入充电时间段查询对应车位信息
                                            </td>
                                        </tr>
                                       	<!-- 
                                        <tr align="center">
                                            <td>1号车位</td>
                                            <td>车位1</td>
                                            <td>普通</td>
                                            <td>6（元/小时）</td>
                                            <td>等待充电中</td>
                                            <td><a>选择</a></td>
                                        </tr>
                                        <tr align="center">
                                            <td>1号车位</td>
                                            <td>车位1</td>
                                            <td>普通</td>
                                            <td>6（元/小时）</td>
                                            <td>等待充电中</td>
                                            <td><a>选择</a></td>
                                        </tr>
                                        <tr align="center">
                                            <td colspan="6">当前网点无车位
                                            </td>
                                        </tr>
                                         -->
                                        
                                        </table>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
        </div>
    </div>
</div>
<div style="width: 100px;height: 100px;"></div>
    <%@include file="footer.jsp"%>
  </body>
<script type="text/javascript">
var date = new Date();

var begintime =  date.getFullYear() +'-'+ (date.getMonth()+1) +'-'+ date.getDate() +' 00:00:00';
var endtime   =  date.getFullYear() +'-'+ (date.getMonth()+1) +'-'+ date.getDate() +' 23:59:59';
	
$(function() {

	$("#queryButton").click(function() {
			ajaxSubmit();
	});
});

$('#chargeTimeBegin').datetimebox({
    value: begintime ,
    required: true
});

$('#chargeTimeEnd').datetimebox({
    value: endtime ,
    required: true
});

function ajaxSubmit() {

	var chargeTimeBegin = $('#chargeTimeBegin').datetimebox('getValue');
	var chargeTimeEnd   = $('#chargeTimeEnd').datetimebox('getValue');
	
	//get parameter
	var netWorkParkStr = {
		chargeTimeBegin:chargeTimeBegin,
		chargeTimeEnd:chargeTimeEnd
	}

	$.ajax({type:"post",
               dataType:"text",
               timeout:30000,
               async:true,
               url:"ecarcharge/query_network_park/${netWork.networkId}.do",
               data:{netWorkParkStr:JSON.stringify(netWorkParkStr)},
               contentType: "application/x-www-form-urlencoded; charset=utf-8",
               success:function (data) {

                    var resultMap =  eval('(' + data + ')');

                    if (resultMap.parkModelList.length > 0 ) {

                    	$('#newOrderContent').empty();

                    	html += '<tr><th style="display:none;">电动车位Id</th><th>电动车位名称</th><th>电动车位大小</th><th>电动车位单价</th><th>电动车位状态</th><th>最近充电结束时间</th><th>操作</th></tr>';

                    	$.each(resultMap.parkModelList, function(i,parkModel){
							html += '<tr align="center">'
                            html += '<td style="display:none;">'+parkModel.park.parkId+'</td>';
                            html += '<td>'+parkModel.park.parkName+'</td>';
                            html += '<td>'+parkModel.park.parkSize+'</td>';
                            html += '<td>'+parkModel.park.parkPrice+'</td>';
                            if (parkModel.parkStatus) {
	                            html += '<td>使用中</td>';
                            } else {
                            	html += '<td>等待充电中</td>';
                            }
                            html += '<td>'+parkModel.waitingTime+'</td>';
                            if (parkModel.parkStatus) {
                            	
                            	html += "<td></td>";
                            } else {
                            
                            	html += "<td><button class=\"btn btn-primary\" onclick=\"selectParkButton("+"'"+parkModel.park.parkId+"'"+")\">充电</button></td>";
                            }
                            html += '</tr>';
                    	});

                    	$('#newOrderContent').append(html);
                    } else {

                    	var html = '';
                    	html += '<tr><th ccc>电动车位Id</th><th>电动车位名称</th><th>电动车位大小</th><th>电动车位单价</th><th>电动车位状态</th><th>操作</th></tr>';
                    	html += '<tr align="center" style="font-size: 25px;">';
                    	html += '<td colspan="6">查询无数据，网点车位未开放</td>';
						html += '</tr>';

                    	$('#newOrderContent').empty();
                    	$('#newOrderContent').append(html);
                    	
                    	
                    }
                    //车位余量查询
                    $('#ParkingAllowance').empty();
                    if (resultMap.chargeNum > 0) {
                    	$('#ParkingAllowance').append('车位余量为'+resultMap.chargeNum+'个，请选择网点进行充电！');
                    	$('#ParkingAllowance').show();
                    } else {
                    	$('#ParkingAllowance').append('可充电站数量为'+resultMap.chargeNum+'个，请按照最近充电结束时间进行车选择！');
                        $('#ParkingAllowance').show();
                    }
               },
               error:function (XMLHttpRequest, textStatus, errorThrown) {
            	   console.log(XMLHttpRequest.status);
            	   console.log(XMLHttpRequest.readyState);
            	   console.log(textStatus);
               }
       });

}

function selectParkButton(parkId){

    var chargeTimeBegin = $('#chargeTimeBegin').datetimebox('getValue');
    var chargeTimeEnd   = $('#chargeTimeEnd').datetimebox('getValue');
	var networkId       = '${netWork.networkId}';

    window.location.href = 'ecarcharge/select_ecar.do?networkId='+networkId+'&parkId='+parkId+'&chargeTimeBegin='+chargeTimeBegin+'&chargeTimeEnd='+chargeTimeEnd+''	
}

</script>
</html>
